<!-- 报修页面 -->
<template>
  <div class="Upload-container">
    <div>
      <InputBox :inputArr="inputArr" @synchronization="getInputData"></InputBox>
      <div class="avatar">
        <span>报修图片</span>
        <uploadAvatar @click="getAvatart" ref="uploadAvatarDom"></uploadAvatar>
      </div>
      <div class="but">
        <button @click="Submit" :class="{disabled:isLoadingRef}">上传报修</button>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import InputBox from "@/components/InputBox/index.vue";
import uploadAvatar from "@/components/uploadAvatar/index.vue";
import { deepClone } from "@/util/copy.js";
import { ref } from "vue";
import {RepairReport} from "@/api/user.js"
import {useUserStore} from "@/store/useUserStore.js"
import {storeToRefs} from "pinia"
const {readUserInfo} = storeToRefs(useUserStore())
const isLoadingRef = ref(false);
const uploadAvatarDom = ref() // 图片上传的DOM
// 文本输入框
const inputArr = ref([
  {
    title: "报修描述",
    describe: "",
    err: [{ required: true, msg: "描述不能为空" }],
    title_width: 80,
    input_width: 400,
    corresponding: "describe",
    type: "text",
  },
]);
const copyInputArr = deepClone(inputArr.value); // 深拷贝
const avatarRef = ref(); // 图片
// 获取报修图片
const getAvatart = (avatar) => {
  avatarRef.value = avatar;
};

// 同步数据
function getInputData(data) {
  inputArr.value = data;
}
// 上传
const Submit =async () =>  {
    if(isLoadingRef.value){
        return
    }
    isLoadingRef.value = true
  const subminInputData = {};
  inputArr.value.forEach((item) => {
    if (item[item.corresponding]) {
      subminInputData[item.corresponding] = item[item.corresponding];
    }
  });
  if (avatarRef.value) {
    subminInputData.avatar = avatarRef.value;
  }
  if (Object.keys(subminInputData).length === 2) {
    const res = await RepairReport({
      ...subminInputData,
      RoomId: readUserInfo.value.roomNoId,
      RepariDormitroy: readUserInfo.value.dormitoryName,
      RepariFloor: readUserInfo.value.floorNumber,
      RepariRoomNo: readUserInfo.value.roomNo
    })
    if(res.data){
      ElMessage({
        message: "上传成功，请耐心等待",
        type: "success",
      });
    }

  } else {
    ElMessage.error("请输入数据");
  }

  inputArr.value = copyInputArr;
  uploadAvatarDom.value.close()
  isLoadingRef.value = false
};
</script>
  
  <style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.Upload-container {
  width: 100%;
  height: 100%;
  position: relative;

  .uploadAvatar-container {
    width: 100px;
    height: 100px;
    margin-left: 10px;
  }
  .avatar {
    display: flex;
    span {
      width: 80px;
      font-size: 1.1em;
      position: relative;
      color: @gray;
      display: block;
      text-align-last: justify;
      text-align: justify;
      text-justify: distribute;
      &::before {
        position: absolute;
        left: -10px;
        top: 0;
        content: "*";
        color: red;
      }
    }
  }
  .but {
    margin-top: 20px;
    button {
      margin-left: 80px;
      cursor: pointer;
      width: 140px;
      height: 50px;
      background: linear-gradient(45deg, @frameColor1, @frameColor2);
      border-radius: 10px;
      color: @white;
      font-size: 20px;
      border: 0;
      position: relative;
    }
    .disabled {
      &::before {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
        display: block;
        content: "";
        width: 140px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.9);
        cursor: not-allowed;
      }
    }
  }
}
</style>